<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="static/css/main.css">
    <script src="static/js/require.js"></script>
    <script src="static/js/main.js"></script>
</head>
<body>


<div class="mark" style="margin:20px">
    <div class="h-line"></div>
    <div class="v-line"></div>
    <img src="static/img/floor.jpg">

</div>
<div class="mark-toolbar">
    <div class="mark-toolbox">
        <div class="mark-toolbox-head">标注</div>
        <div class="mark-toolbox-body">
            <ul class="mark-items">
                <li class="mark-item mark-camera" data-type="camera" title="摄像头"></li>
                <li class="mark-item mark-model" data-type="model" title="模特"></li>
                <li class="mark-item mark-cabinet" data-type="cabinet" title="货柜"></li>
            </ul>
        </div>
    </div>

    <div class="mark-toolbox">
        <div class="mark-toolbox-head">坐标位置信息</div>
        <div class="mark-toolbox-body">
            <div class="mark-pos">
                <dl>
                    <dt>X</dt>
                    <dd class="mark-pos-x">0</dd>
                </dl>
                <dl>
                    <dt>Y</dt>
                    <dd class="mark-pos-y">0</dd>
                </dl>
            </div>
        </div>
    </div>


    <div class="mark-toolbox">
        <div class="mark-toolbox-head">已添加</div>
        <div class="mark-toolbox-body">
            <ul class="marked-items">
                <li class="marked-item">
                    <span class="marked-icon mark-model"></span>模特(1000,200)<span class="mark-delete">&times;</span>
                </li>
                <li class="marked-item">
                    <span class="marked-icon mark-camera"></span>摄像头(100,251)<span class="mark-delete">&times;</span>
                </li>
                <li class="marked-item">
                    <span class="marked-icon mark-cabinet"></span>货柜(522,4554)<span class="mark-delete">&times;</span>
                </li>
                <li class="marked-item">
                    <span class="marked-icon mark-model"></span>模特(696,112)<span class="mark-delete">&times;</span>
                </li>
                <li class="marked-item">
                    <span class="marked-icon mark-cabinet"></span>货柜(122,1157)<span class="mark-delete">&times;</span>
                </li>
                <li class="marked-item">
                    <span class="marked-icon mark-camera"></span>摄像头(752,452)<span class="mark-delete">&times;</span>
                </li>
            </ul>
        </div>
    </div>


</div>


<script>
    require(['jquery', 'template'], function ($, template) {

        var $mark = $('.mark');
        var type = '';
        $('.mark-item').on('click', function () {

            type = $(this).data('type');
            $mark.addClass('marking');

        });


        var vline = $('.v-line');
        var hline = $('.h-line');


        var offset = $mark.offset();

        var $markPosX = $('.mark-pos-x');
        var $markPosY = $('.mark-pos-y');

        $('.mark').on('mousemove', function (e) {
            var x = e.pageX - offset.left - 1;
            var y = e.pageY - offset.top - 1;
            $markPosX.text(x);
            $markPosY.text(y);
            vline.css('left', x);
            hline.css('top', y);
        });

        var tplMapMark = '<div class="map-mark map-{{type}}" style="top:{{top}}px;left:{{left}}px"></div>';

        $('.mark').on('click', function (e) {
            var x = e.pageX - offset.left - 1;
            var y = e.pageY - offset.top - 1;
            $markPosX.text(x);
            $markPosY.text(y);

            $mark.append(template.compile(tplMapMark)({
                top: y - 4,
                left: x - 4,
                type: type
            }));
        });

    });


</script>

</body>
</html>